<template>
  <div class="navi-wapper" style="width: 180px">
    <div :key="0" class="menu-collapsed" >
      <span class="">导航菜单</span>
      <a-icon class="collapsed-icon" type="double-left" />
    </div>
    <a-menu mode="inline" theme="dark" :multiple="false" v-model="realSelectedKeys" :inline-collapsed="collapsed" :open-keys.sync="realOpenKeys" @openChange="onOpenChange">
      <template v-for="item in naviItems.filter(x => !x.hidden)">
        <template v-if="item.children">
          <a-sub-menu :key="String(item.key)">
            <span slot="title" class="nav-title"><svg-icon :icon-class="item.icon" /><span class="pl10">{{ item.title }}</span></span>
            <a-menu-item v-waves v-for="(subItem) in item.children.filter(x => !x.hidden)" :key="String(subItem.key)" @click="goPath(subItem)">{{ subItem.title }}
            </a-menu-item>
          </a-sub-menu>
        </template>
        <template v-else>
          <a-menu-item :key="String(item.key)" @click="goPath(item, item.type)" class="nav-title">
            <svg-icon :icon-class="item.icon" /><span class="pl10">{{ item.title }}</span>
          </a-menu-item>
        </template>
      </template>
    </a-menu>
  </div>
</template>

<script>
import { mapState } from 'vuex';

let itemTemp = {};

export default {
  data() {
    return {
      realOpenKeys: [],
      realSelectedKeys: ['1'],
      expMenuFlag: false,
      collapsed: false,
    };
  },
  beforeMount() {
    this.realSelectedKeys = this.selectedKeys;
    this.realOpenKeys = this.openKeys;
  },
  watch: {
    $route(newVal) {
      const componentInfo = this.findComponent(this.naviItems, newVal.path);
      if (JSON.stringify(componentInfo) !== '{}' && !componentInfo.hidden) {
        const { path, title, key } = componentInfo;
        this.updateKeyTitle(path, title, key);
      }
      // 个人信息
      if (componentInfo.path === '/PersonalInfo/PersonalInfo') {
        const { path, title, key } = componentInfo;
        this.updateKeyTitle(path, title, key);
      }
    },
    selectedKeys(val) {
      this.realSelectedKeys = val;
      let [selectedKey] = val;
      const tempArry = selectedKey.split('.');
      selectedKey = tempArry.length > 1 ? tempArry[0] : selectedKey;
      if (!this.realOpenKeys.includes(selectedKey)) {
        this.realOpenKeys.push(selectedKey);
      }
    },
  },
  computed: {
    ...mapState(['naviItems', 'selectedKeys', 'openKeys']),
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    findComponent(list, path) {
      list.forEach((item) => {
        if (item.path && item.path === path) {
          itemTemp = item;
        }
        if (item.children) {
          this.findComponent(item.children, path);
        }
      });
      return itemTemp;
    },
    handleToggleMenu() {
      this.expMenuFlag = !this.expMenuFlag;
    },
    goPath(item) {
      this.$router.push(item.path);
    },
    updateKeyTitle(path, title, key) {
      this.realSelectedKeys = [];
      this.realSelectedKeys.push(key);
      this.$store.commit('setSelectedKeys', this.realSelectedKeys);
      const componentName = path.split('/')[2];
      this.$store.dispatch('updateOpenPages', {
        path, title, key, componentName,
      });
    },
    onOpenChange(openKeys) {
      this.$store.commit('setOpenKeys', openKeys);
    },
  },
};
</script>

<style lang="stylus" scoped>
@import "../assets/css/common.stylus"
.navi-wapper
  // width: 180px
  height: calc(100vh - 50px)
  overflow: auto
  background: #202637
  transition: all .15s ease-in-out
  overflow-x: hidden
  .nav-title
    display flex
    align-items center
  .menu-collapsed
    font-weight 400
    color #FFFFFF
    line-height 40px
    padding-left 24px
    display: flex
    align-items center
    justify-content space-between
    padding-right 20px
    .collapsed-icon
      text-align right
      font-size 12px
      color #3E6CD5
</style>
